
<script lang="ts" setup>
import {ref,watch} from "vue";
import { useCounterStore } from "@/stores/counter";
import { useBooksStore } from "@/stores/books";
import { storeToRefs } from "pinia";
import { useGoodsSotre } from "@/stores/goodsStore";


// const store = useCounterStore();

// console.log("store",store);

// function addCountFn(){
//     store.addCount(2);
// }

const store = useCounterStore();

const { count } = storeToRefs(store); //相当于toRefs


console.log("count", count);

function addCountFn() {
    // store.addCount(2);
    count.value++;
    console.log("store.count", store.count);

}


// const storeBooks = useBooksStore();

// function addBookFn() {
//     storeBooks.addBook({
//         id: "01002",
//         name: "西游记"
//     });
// }

const {books,addBook} = useBooksStore();

console.log("books",books);


function addBookFn() {
    addBook({
        id: "01002",
        name: "西游记"
    });
}

const booksStore = useBooksStore();
const {age} =  storeToRefs(booksStore);

console.log("age",age);

function addAgeFn(){
    booksStore.addAge();
}

const {goodsList,getGoodsList} = useGoodsSotre();

getGoodsList();

const pageIndex = ref(1);

watch(pageIndex,()=>{
    getGoodsList(pageIndex.value,10,true);
})

const  html = ref("一段html片段");

</script>

<template>
    <h1>首页</h1>    
    <button @click="save">保存</button>
    <p>{{ count }}</p>
    <input type="button" value="count++" @click="addCountFn">
    <hr />
    <ul>
        <li v-for="item  in books" :key="item.id">
            {{ item.name }}
        </li>
    </ul>
    <input type="button" value="添加一本书" @click="addBookFn">
    <hr/>
    <p>{{ age }}</p>
    <input type="button" value="age++" @click="addAgeFn">
    <hr/>
    第<select v-model="pageIndex">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>页
    <ul>
        <li v-for="item  in goodsList" :key="item.proid">
            {{ item.proname }}
        </li>
    </ul>
</template>

<style lang="scss" scoped></style>
